<div class="container">
  <div class="logoDiv">
    <div>
      <img class="logoImg" src="assets/images/login_logo.png" alt="logo">
    </div>
    <div style="text-align:right;">
      <img class="logoImg2" src="assets/images/chahua.png" alt="logo">
    </div>
  </div>

  <div class="login_div">
    <div class="form-div">
        <nz-spin [nzSpinning]="nzSpin" nzSimple [nzSize]="'large'">
        <div class="top-login">登录</div>
        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-control>
              <div nz-row [nzGutter]="8">
                  <div nz-col [nzSpan]="24">
                    <nz-input-group [nzPrefix]="prefixUser">
                      <input type="text" (focus)="cancelErrorTips()" nz-input formControlName="username" placeholder="请输入账号">
                    </nz-input-group>
                  </div>
                  <div nz-col [nzSpan]="6" style="margin-left:-100px;">
                    <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">请输入账号!</nz-form-explain>
                  </div>
              </div>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <div nz-row [nzGutter]="8">
                  <div nz-col [nzSpan]="24">
                    <nz-input-group [nzPrefix]="prefixLock">
                      <input type="password" (focus)="cancelErrorTips()" nz-input formControlName="password" placeholder="请输入密码">
                    </nz-input-group>
                  </div>
                  <div nz-col [nzSpan]="6" style="margin-left:-100px;">
                      <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
                  </div>
              </div>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
              <nz-form-control>
                <div nz-row [nzGutter]="8">
                  <div nz-col [nzSpan]="18">
                      <div nz-col [nzSpan]="24" style="margin-left: -4px;">
                        <input nz-input (focus)="cancelErrorTips()" formControlName="captcha" autocomplete="off" id="captcha" placeholder="请输入验证码">
                      </div>
                      <div nz-col [nzSpan]="10" style="margin-left:-110px;">
                          <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">请输入验证码!</nz-form-explain>
                      </div>
                  </div>
                  <div nz-col [nzSpan]="6" style="margin-left: -4px;">
                      <img class="codeImg" (click)="changeCode()" [src]="codeUrl" />
                  </div>
                </div>
              </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="errorTips">
              <nz-form-control class="errorTips">
                  {{errorTips}}
              </nz-form-control>
          </nz-form-item>

          <nz-form-item style="background:#fff;">
            <nz-form-control>
              <label nz-checkbox formControlName="remember" style="float:left">
                <span>记住密码</span>
              </label>
              <button nz-button class="login-form-button" [nzSize]="'large'" [nzType]="'primary'" (click)="loginIn()">登  录</button>
              <a class="login-form-forgot" routerLink="/forgetpwd">忘记密码</a>
              <a href="" routerLink="/register" style="float:left;"><span style="color:rgba(0,0,0,.65);">没有账号？</span>注册</a>
            </nz-form-control>
          </nz-form-item>
        </form>
        <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
        <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>  
        </nz-spin>
    </div>
  </div>
  <div class="footer">
      智管印打印服务管理平台
  </div>
</div>